console
Vue.component('el-select-all', {
template: `
<el-select
v-model="selected"
multiple
v-bind="$attrsAll"
v-on="$listenserAll"
@change="onChange">
<el-option
v-for="item in mdoptionsList"
:key="item.key"
:label="item.label"
:value="item.value" />
</el-select>
`,
props: {
value: {
type: Array,
default: () => {
return []
}
},
options: {
type: Array,
default: () => {
return []
}
}
},
data() {
const selected = this.value || []
return {
selected,
mdoptionsValue: [],
oldMdoptionsValue: [],
mdoptionsList: []
}
},
computed: {
$attrsAll() {
const result = {
...this.$attrs
}
return result
},
$listenserAll() {
const _this = this
return Object.assign({}, this.$listeners, {
change: () => {
this.$emit('change', (_this.selected || []).filter(v => {
return v !== 'all'
}))
},
input: () => {
this.$emit('input', (_this.selected || []).filter(v => {
return v !== 'all'
}))
}
});
}
},
watch: {
selected: {
immediate: true,
deep: true,
handler(val) {
this.$emit('input', (val || []).filter(v => {
return v !== 'all'
}))
}
},
options: {
immediate: true,
deep: true,
handler(val) {
if (!val || val.length === 0) {
this.mdoptionsList = []
} else {
this.mdoptionsList = [{
key: 'all',
value: 'all',
label: '全部'
}, ...val]
}
}
}
},
mounted() {
},
methods: {
onChange(val) {
const allValues = []
for (const item of this.mdoptionsList) {
allValues.push(item.value)
}
const oldVal = this.oldMdoptionsValue.length === 1 ? [] : this.oldMdoptionsValue[1] || []
if (val.includes('all')) this.selected = allValues
if (oldVal.includes('all') && !val.includes('all')) this.selected = []
if (oldVal.includes('all') && val.includes('all')) {
const index = val.indexOf('all')
val.splice(index, 1)
this.selected = val
}
if (!oldVal.includes('all') && !val.includes('all')) {
if (val.length === allValues.length - 1) this.selected = ['all'].concat(val)
}
this.oldMdoptionsValue[1] = this.selected
}
}
})
var vm = new Vue({
el: '#app',
data() {
return {
storeCodes: [],
mdoptionsList1: [],
mdoptionsList: [{
key: 'test',
value: 'test',
label: 'test'
}, {
key: 'test2',
value: 'test2',
label: 'test2'
}, {
key: 'test3',
value: 'test3',
label: 'test3'
}, {
key: 'test4',
value: 'test4',
label: 'test4'
}, {
key: 'test5',
value: 'test5',
label: 'test5'
}],
centerDialogVisible: false,
centerDialogVisible1: false,
};
},
methods: {
toast() {
this.$message({
message: '这是一条消息提示',
duration: 0,
type: 'warning'
});
},
opnen() {
this.centerDialogVisible = true
this.$nextTick(() => {
})
},
},
mounted() {
this.$nextTick(() => {
document.querySelector('#qwe').appendChild(this.$refs.dialog.$el)
})
},
})
<div id="app">
<div style="position: relative;height:300px" id="qwe">
<el-button type="text" @click="opnen">点击打开 Dialog</el-button>
<el-button type="text" @click="centerDialogVisible1 = true">
点击打开 Dialog body
</el-button>
<div style="position: relative;height:100px" >
<el-dialog
ref="dialog"
title="提示"
:visible.sync="centerDialogVisible"
width="30%"
:close-on-click-modal="false"
:modal="false"
:modal-append-to-body="false"
:append-to-body="false"
center>
<span>需要注意的是内容是默认不居中的</span>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible1 = true">next</el-button>
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
</span>
<div></div>
</el-dialog>
</div>
</div>
<el-dialog
ref="dialog1"
title="提示"
:visible.sync="centerDialogVisible1"
width="30%"
center>
<span>123213</span>
<span slot="footer" class="dialog-footer">
<el-button
@click="centerDialogVisible = true">next</el-button>
<el-button type="primary"
@click="centerDialogVisible1 = false">确 定</el-button>
</span>
</el-dialog>
<el-button @click="toast">toast</el-button>
<div style="height: 90vh;width:100px;">
<el-scrollbar style="height:100%;" wrap-style="witdh:60px;" view-class="aa">
<div style="white-space: nowrap;word-break: break-all">
<p v-for="(item, index) in 200" :key="index">{{index}} 这里是一些文本。</p>
</div>
<el-scrollbar>
</div>
<div style="height: 100vh; display: none">
<el-scrollbar style="height: 100%;">
<div style="height: 500px;width: 100%;background: red;"></div>
<div style="height: 500px;width: 100%;background: yellowgreen;"></div>
<div style="height: 500px;width: 100%;background: blueviolet;"></div>
</el-scrollbar>
</div>
</div>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
.fs-modal {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .5;
background: #000;
}
.el-dialog__wrapper{
position: absolute !important;
}
.el-message.el-message--warning {
background-color: #FFF7EA;
border-color: #FBB44C;
font-size: 16px;
font-family: 'Microsoft YaHei';
font-weight: 400;
color: #373E4F;
line-height: 24px;
box-shadow: 0px 1px 2px 0px #FFFFFF, 0px 8px 8px 0px rgba(253, 185, 68, 0.21);
border-radius: 4px;
padding: 10px 6px 10px 10px;
min-width: 280px;
}
.el-message__content {
width: 100%;
text-align: center;
}
.el-message .el-message__icon.el-icon-warning{
font-size: 20px;
color: #FDB944;
position: absolute;
top: 8px;
left: 10px;
}
.el-message__icon {}
.el-message.el-message--warning .el-message__content {
color: #373E4F;
font-size: 16px;
word-break: break-all;
padding:0 20px;
}