|
@@ -1,14 +1,19 @@
|
|
|
<template>
|
|
|
<div class="pull-down-menu-in-editor" v-clickoutside="onClickOutside">
|
|
|
<button class="menu-cover" @click="isExpand = !isExpand">
|
|
|
- {{placeholder ? placeholder : $i18n.t(`zh_key.${value}`)}}
|
|
|
- <i class="iconfont icon-material_preview_upload_collect" :class="{flip: isExpand}"></i>
|
|
|
+ {{ placeholder ? placeholder : $i18n.t(`zh_key.${value}`) }}
|
|
|
+ <i
|
|
|
+ class="iconfont icon-material_preview_upload_collect"
|
|
|
+ :class="{ flip: isExpand }"
|
|
|
+ ></i>
|
|
|
</button>
|
|
|
<div class="menu" v-show="isExpand">
|
|
|
- <button v-for="(item, index) of valueList" :key="index"
|
|
|
+ <button
|
|
|
+ v-for="(item, index) of valueList"
|
|
|
+ :key="index"
|
|
|
@click="onSelect(item)"
|
|
|
>
|
|
|
- {{$i18n.t(`zh_key.${item}`)}}
|
|
|
+ {{ $i18n.t(`zh_key.${item}`) }}
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -19,53 +24,51 @@ export default {
|
|
|
props: {
|
|
|
valueList: {
|
|
|
type: Array,
|
|
|
- default: function() {
|
|
|
- return [
|
|
|
- '111',
|
|
|
- '222',
|
|
|
- ]
|
|
|
+ default: function () {
|
|
|
+ return ["111", "222"];
|
|
|
},
|
|
|
},
|
|
|
placeholder: {
|
|
|
type: String,
|
|
|
- default: '',
|
|
|
+ default: "",
|
|
|
},
|
|
|
value: {
|
|
|
type: String,
|
|
|
required: true,
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
isExpand: false,
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
methods: {
|
|
|
onClickOutside() {
|
|
|
if (this.isExpand) {
|
|
|
- this.isExpand = false
|
|
|
+ this.isExpand = false;
|
|
|
}
|
|
|
},
|
|
|
onSelect(item) {
|
|
|
- console.log(item,'ads')
|
|
|
- this.isExpand = false
|
|
|
- this.$emit('input', item)
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ console.log(item, "ads");
|
|
|
+ this.isExpand = false;
|
|
|
+ this.$emit("input", item);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- button {
|
|
|
- background: #252526;
|
|
|
- border: 1px solid #404040;
|
|
|
- height: 36px;
|
|
|
- color: #fff;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+button {
|
|
|
+ background: #252526;
|
|
|
+ border: 1px solid #404040;
|
|
|
+ height: 36px;
|
|
|
+ color: #fff;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
.pull-down-menu-in-editor {
|
|
|
width: 140px;
|
|
|
position: relative;
|
|
|
+ min-width: 160px;
|
|
|
> button.menu-cover {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
@@ -88,7 +91,9 @@ export default {
|
|
|
display: block;
|
|
|
border-top: none;
|
|
|
cursor: pointer;
|
|
|
+ text-align: left;
|
|
|
+ padding:0 16px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|