nmp add element-ui
main.js
/*自定义element标签名开始*/
import {Input,
Button,
Radio,
RadioGroup,
RadioButton,
Checkbox,
CheckboxButton,
CheckboxGroup,
Switch,
Select,
Tabs,
TabPane,
Form,
FormItem,
MessageBox} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
function _extend(base, clazz) {
return {
extends:base,
mounted:function() {
var el = this.$el;
el.className = el.className + " " + clazz;
}
};
}
function _install(Vue, name, comp) {
Vue.component(name, _extend(comp, name));
}
function _confirm(message, fok, fcancel) {
MessageBox.confirm(message, '确认', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(fok) {
fok();
}
}).catch(() => {
if(fcancel) {
fcancel();
}
});
}
const install = function(Vue, opts = {}) {
_install(Vue, "hlvy-input", Input);
_install(Vue, "hlvy-button", Button);
_install(Vue, "hlvy-switch", Switch);
_install(Vue, "hlvy-radio", Radio);
_install(Vue, "hlvy-radio-group", RadioGroup);
_install(Vue, "hlvy-form", Form);
_install(Vue, "hlvy-form-item", FormItem);
_install(Vue, "hlvy-tabs", Tabs);
_install(Vue, "hlvy-tab-pane", TabPane);
Vue.prototype.$confirm = _confirm;
};
Vue.use(install);
页面使用
<template>
<div class="hello">
<hlvy-button>11</hlvy-button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
效果