A Mobile UI Components Library based on Vue.js
npm install zmui --save
import zmUI from 'zmui';
Vue.use(zmUI);
import 'zmui/src/styles/index.scss';
A header component
<zm-header>This is Header</zm-header>
Determine if exists a back btn on the left, it can be set to true
or a normal string (default undefined
), set true
to execute history.back()
and a string stands for the event name for custom behavior.
<zm-header :back="true">Header</zm-header>
<zm-header back="myback" @myback="mybackHandle">Header</zm-header>
A Boolean value to control the position
attribute of the header to fixed
(set false
, default) or relative
(set true
).
A object value to determine if exists a text button of the right, and the event name for emitting.
<zm-header :btn="{text: 'Save', emit: 'save'}" @save="saveInfo"></zm-header>
Same to btn
, but on the left.
A toast component
Mount zm-toast
on the root vue instance:
<zm-toast></zm-toast>
Invoke $toast().show
on any vue instance or Vue itself:
this.$toast().show('This is message');
Vue.$toast().show('This is message');
The second argument can configure the display duration, for example 2 seconds:
this.$toast().show('This is message', 2000);
The default duration is 3 seconds (3000ms), You can use constants defined in the component:
- LENGTH_SHORT - 1 second
- LENGTH_NORMAL - 3 seconds
- LENGTH_LONG - 5 seconds
import { Toast } from 'zmui';
this.$toast().show('This is message', Toast.LENGTH_SHORT);
The third argument can configure if to display a icon with exclamation mark over the text.
this.$toast().show('This is a toast with icon', 1000, true);
A carousel component for images. It works well on both PC (mouse events) and mobile browsers (touch events).
<zm-carousel :list="list" :auto="3000"></zm-carousel>
{
list: [{
url: 'http://www.image.domain/image1.png',
href: 'http://www.example1.com/',
}, {
url: 'http://www.image.domain/image2.png',
href: 'http://www.example2.com/',
}]
}
The image data list. For each item, url
for load image, href
for navigation address.
If href
is not defined, then it will emit an event carousel-click
with the current item as the parameter.
The autoplay interval (ms), set 0 (default) for disable autoplay
A loading icon displayed on the screen center
Mount zm-loading
on the root vue instance:
<zm-loading></zm-loading>
Invoke $loading.show
or $loading.hide
on any vue instance or Vue itself:
this.$loading().show('Loading...');
this.$loading().hide();
You can pass the second parameter to show
to set the loading icon be modal or not (Not modal by default).
this.$loading().show('Loading...', true);
Open a numeric keyboard
<zm-number-keyboard @input="onNumberInput" @ok="setNumber">
<div>Your input: {{ numberInput }}</div>
</zm-number-keyboard>
export default {
data() {
return {
numberInput: '',
number: '',
}
},
methods: {
onNumberInput(number) {
this.numberInput = number;
},
setNumber(number) {
this.number = number;
}
}
}
Trigger when keyboard keys clicked, contains the realtime result
Trigger when ok button clicked, contains the final result
A select component for single choosing.
<zm-single-select ref="jobSelect" :options="jobList" v-model="job"></zm-single-select>
data: {
jobList: [
'Junior Engineer', 'Engineer',
'Senior Engineer', 'Architect',
'Senior Architect', 'CTO'
],
job: ''
}
methods: {
openJobChoose() {
this.$refs.jobSelect.open();
}
}
Not only String, the option type can be an object with keys (a value key and a text key). The name of text key can be configured with text-key
props for displaying.
<zm-single-select
ref="genderSelect"
:options="genderList"
text-key="text"
></zm-single-select>
data: {
genderList: [
{ value: 1, text: 'Male' },
{ value: 2, text: 'Female'},
],
gender: null,
}
methods: {
openGenderChoose() {
this.$refs.genderSelect.open();
}
}
The SingleSelect
can be used together with Input
component. View Input
for detail.
To be continued.
To be continued.
To be continued.
To be continued.
To be continued.
To be continued.
To be continued.
To be continued.
- Optimize styles on component
Toast
- Add custom uploading support on component
ImageUploader
- Remove dependencies from component
ImageUploader
- Add component
Switch
- Add component
ImagePreview
- Add component
ImageUploader
- Add HTML format support on component
Modal
- Add empty title support on component
Modal
- Add rich style options on component
Modal
- Add customized content on component
Modal
- Optimize styles on component
Input
- Add option
useModalBack
to control if usingModalBack
feature on some poor supported browsers such as Android DingTalk browser
- [bugfix] repair undefined error on
Carousel
- Add seamless scrolling feature on
Carousel
- Add component
Progress
- Add component
Suggestion
- Add component
Input
- Add
v-model
binding toSingleSelect
- Add components
PullDown
andScrollLoading
- Add hardware acceleration on transition elements
- Add icon option on
Toast
component
- Assign extended objects to Vue itself as well as Vue.prototype
- Optimize the click event triggering of
Carousel
- Add component
Navigation
andModal
- Move
vue
fromdependencies
todevDependencies
- Add Fallback.js for low android versions on css transitions
- Remove explicit dependency of vue
- Modify the API of
Toast
andLoading
- Add component
DistrictSelect
- Add back handling on modal-like components
- Support Theme customized
- Adjust directory structure
- Add component
NumberKeyboard
- Add component
SingleSelect
andMultipleSelect
- Add demo pages
- Extract transition styles
- Other optimization
- Add component
Loading
- Add component
Slider
(later renamed toCarousel
)
- Add component
Toast
- Add component
Header