仿制element-ui按钮组件(一)
这里我想做一个按钮组件的页面,左边放置按钮组件,右边是按钮组件的属性选择下拉框。我可以选为按钮定义的属性,然后在左边的按钮上面体现。
第一步-安装element-ui,配置select。
这里我遇到一个问题,如上图,element-ui的组件引入之后没有生效:
从以下入手检查:
1.安装依赖
2.加载样式
3.加载js
4.安装组件
5.使用组件
找到原因,vue中使用要在main.js文件中引入
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"
Vue.use(ElementUI)
可以了。
第二步-我们为了实现button和select的数据的联动,准备用jq处理这个。
1.首先安装jq的依赖(使用淘宝镜像比较快)
cnpm install jquery --save
2.修改配置文件webpack.base.conf.js
这里主要改啥呢,第一,引入webpack
第二,配置添加jq的插件
第三,去页面引入。即可使用。
第三步-实现联动按钮和select(思路是使用vue的v-model双向绑定机制)
上效果
粘贴app.vue父组件源码:
<template>
<div id="app">
<div id="content">
<!-- <div class="box" v-for="item in configs" :key="item.type"> -->
<!-- :buttonSize=".buttonSize" -->
<div class="box">
<etButton
:buttonSize="selectSize"
:type="selectType"
:radius="selectRadius"
:btnText="btnText"
:isdisabled="isdisabled"
></etButton>
<div class="box-text">
<p>尺寸:(可选择:小号,中号,大号)</p>
<el-select
id="configSelect"
v-model="selectSize"
placeholder="请选择"
>
<el-option
v-for="item in sizes"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<p>类型:(可选择:正常,告警,警告)</p>
<el-select
id="configSelect"
v-model="selectType"
placeholder="请选择"
>
<el-option
v-for="item in types"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<p>圆角:(可选择:10%,20%,30%)</p>
<el-select
id="configSelect"
v-model="selectRadius"
placeholder="请选择"
>
<el-option
v-for="item in radius"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<p>禁止点击:(可选择:是 否)</p>
<el-switch
v-model="isdisabled"
active-color="#13ce66"
inactive-color="#ff4949"
>
</el-switch>
<!-- <input v-bind="item.type">大小:{{item.buttonSize}}</input> -->
</div>
</div>
<!-- </div> -->
</div>
</div>
</template>
<script>
import $ from "jquery";
import etButton from "./components/sweet-button/sweetbutton.vue";
export default {
name: "App",
components: {
etButton,
},
data() {
return {
selectSize: "",
selectType: "",
selectRadius: "",
isdisabled: false,
btnText: "请点击",
configs: [
{
type: "normal",
buttonSize: "mid",
},
{
type: "warning",
buttonSize: "small",
},
],
sizes: [
{
label: "小号",
value: "small",
},
{
label: "中号",
value: "mid",
},
{
label: "大号",
value: "large",
},
],
types: [
{
label: "正常",
value: "normal",
},
{
label: "告警",
value: "warning",
},
{
label: "警告",
value: "alarm",
},
],
radius: [
{
label: "10%",
value: "little",
},
{
label: "20%",
value: "few",
},
{
label: "30%",
value: "much",
},
],
};
},
computed: {
getType: function () {
// let temp = $("#configSelect");
},
},
mounted() {
// let temp = $("#configSelect");
// console.log("caohan", temp);
},
methods: {
},
};
</script>
<style>
#app {
/* font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50; */
/* margin-top: 60px; */
width: 100%;
height: 800px;
}
#content {
/* display: flex;
align-items: center; */
/* justify-content: space-around; */
/* flex-direction: column; */
}
.box {
width: 1000px;
height: auto;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
background: darkgray;
margin-top: 20px;
}
</style>