VUE自动定义控件SwitchButton
<switch-button style="margin-left: 20rpx;" :buttons='["一键打分", "快捷打分"]' select="快捷打分" @ButtonClick="SwitchButnClick"></switch-button>SwitchButton.vue
<template><view class="DivLine"><text v-for="(button, index) in buttons" v-bind:class="{'select': curSelect===button }" @click="buttonClick(button, index)">{{button}}</text></view>
</template><script>export default {name: 'SwitchButton',props: {buttons: Array,select: String},data() {return {init: false,curSelect: this.select,msg: '',menus: ["按钮1", "按钮2", "按钮3"]}},created() {// this.showTittle = this.curTittle; // 创建时属性curTittle为空},computed: {// showTittle2()// {// this.showTittle = this.curTittle; // curTittle每次变动时，均会调用showTittle2// return this.showTittle;// }},watch: {curTittle: function(val) {// this.showTittle = val; // 仅仅变动时调用},},mounted() {//this.select = this.curTittle; // 在watch之后仅仅执行一次},methods: {ClickIteam(index) {this.buttonClick(this.buttons[index], index);},buttonClick(item, index) {if(item != this.curSelect){this.curSelect = item;this.$emit('ButtonClick', item, index);}}// menuClick(path){// headerDiv.forEach(element => {// element.tittle = "选中";// if(element.path == path) element.selected = true;// else element.selected = false;// });// }}}
</script><style scoped>.Content {position: relative;text-align: left;display: inline-block;width: 100%; // 显示屏幕宽度overflow: auto; // 超出宽度自动滚动/* 高度未限制,则随内容加长 */background-color: gray;vertical-align: middle;border-bottom: 1px solid #ccc;padding: 4px 0px 4px 0px;}/* 已最大长度/最大宽度展示一行 */.DivLine {height: max-content;width: max-content; // 随内容自动加宽display: inline-block;text-align: center;border: 1px solid rgb(126, 125, 125);background: #f1f1f1;padding: 2px;border-radius: 5px;}text {/* background-color: #ebebeb; *//* color: #007AFF;border-bottom: 2rpx solid #007AFF; *//* box-shadow: 0 0 5px 0px rgb(126, 125, 125); */width: max-content;height: 20px;line-height: 20px;font-size: 16px;background-color: #fff;color: #007AFF;display: block;border-radius: 0px;padding: 5px 10px;margin: 0 auto;display: inline-block;}.select {/* background-color: #ebebeb; */background-color: #007AFF;color: #fff;/* box-shadow: 0 0 5px 0px rgb(126, 125, 125); */}</style>