SOURCE

console 命令行工具 X clear

                    
>
console
/* <input type="text" 
          placeholder="关键词" 
          style="height: 30px; margin-left:5%;margin-top:7px;"
          class="el-input__inner"> */

/* $refs['appTrend'].hasOwnProperty('timer') */

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 val = this.$vnode.data.model && this.$vnode.data.model.value;
      const result = {
        // value: val,
        ...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) {
      // eslint-disable-next-line no-debugger
      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() {
            // error success
            this.$message({
                // showClose: true,
                message: '这是一条消息提示',
                duration: 0,
                type: 'warning'
            });
        },
        opnen() {
            this.centerDialogVisible = true
            this.$nextTick(() => {
                //console.log(this.$refs.dialog)
                //console.log(this.$refs.dialog.$el)
                //document.querySelector('#qwe').appendChild(this.$refs.dialog.$el)
            })
        },
    },
    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 设置高度,判断是否滚动是看它的height判断的 -->
        <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 id="el-select-all">
        <el-scrollbar :native="false" wrapStyle="" wrapClass="" viewClass="" viewStyle="" noresize="false" tag="section">
            <div>
                <p v-for="(item, index) in 200" :key="index">{{index}} 这里是一些文本。</p>
            </div>
        <el-scrollbar>
    </div> -->
</div>

<!--  https://unpkg.com/element-ui@2.4.7/lib/theme-chalk/index.css
  https://unpkg.com/element-ui@2.4.7/lib/theme-chalk/fonts/element-icons.woff
  https://unpkg.com/element-ui@2.4.7/lib/theme-chalk/fonts/element-icons.ttf -->
<!-- 引入element-ui样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入element-ui组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- <script src="https://element.eleme.cn/element-ui.f1d0c72.js"></script> -->

<!-- <script src=" https://unpkg.com/element-ui@2.4.7/lib/index.js"></script> -->


 
/* .el-select__tags {
  white-space: nowrap !important;
  overflow: hidden;
} */

/* .el-select__tags > span {
    display: flex !important;
    white-space: nowrap !important;
  overflow: hidden;
  height: 100%;
}

.el-select-dropdown__wrap {
    max-height: 120px !important;
}
 */

/*  .v-modal {
     position: absolute !important;
 } */
.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;
}