Skip to content
On this page

1 月 30 日

1 月 28 日

1 月 27 日

1 月 26 日

1 月 25 日

1 月 22 日

1 月 21 日

1 月 20 日

1 月 19 日

1 月 18 日

  • 81 echarts 地图
    • 设置 echarts div 的宽度和高度
    • 边距可以设置 gird 属性中的top,left:right,bottom
    • x 轴和 y 轴,均可设置多个,匹配数据的时候要进行设置 yIndex
    • 柱状图的柱状 可设置颜色
    • 顶部选项 可设置 图标 icon,以及字体颜色等
    • 配置渐变颜色 https://blog.csdn.net/weixin_44897255/article/details/96877562

1 月 16 日

1 月 15 日

1 月 14 日

1 月 13 日

1 月 12 日

javascript
      //柱状图颜色随机设置
      //https://www.cnblogs.com/kang543418095/p/5964397.html?utm_source=itdadao&utm_medium=referral
      itemStyle: {
          normal: {
        //这里是重点
              color: function(params) {
                //注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
                  var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                  return colorList[params.dataIndex]
              }
          }
      }

1 月 11 日

1 月 9 日

1 月 8 日

1 月 7 日

1 月 6 日

1 月 5 日

  • 10 vue keepalive 发现一旦设置某个路由为 true,后续通过动态设置就是无效的后来发现 github 官网也有很多人遇到这个问题

    • https://github.com/vuejs/vue-router/issues/811
      目前通过变通的方式进行解决此问题,凡是要进行缓存的组件页面,开始都将 keepalive 设置为 true,后续通过钩子函数去触发数据列表更新。
  • 11 vue router 官网有时候可以看一下 api,感觉有很多自己是没有用到过的

  • 12 vue elementui radio 在封装为表单控件,且可设置为必填项目,其 label 设置与外部赋值要保持一致的数据类型,而且 required 传入值如果为 undefined 要经过判断,代码如下(截取部分)

javascript
    export default {
      props: {
        column: {
          type: [Object],
          default: () => {},
        },
        data: {
          type: Number,
          default: undefined,
        },
      },
      data() {
        return {
          rules: [
            {
              // 加上双??,防止出现选中后提示请选择"this.column.title"
              required: this.column.required ?? false,
              message: '请选择' + this.column.title,
              trigger: 'change',
            },
          ],
          list: [],
        }
      },
      created() {
        this.getList()
      },
      computed: {
        value: {
          get: function() {
            return this.data
          },
          set: function(val) {
            console.log(val, typeof val, 'this.radioView.val')
            this.$emit('update:data', val)
          },
        },
      },

此为一个子组件,data 会传入值类型要与 this.getList 中设置的 label 值要保持一致(计算属性 value 会去绑定 radio 的 v-model)。

另外一种设置图片的显示方式,不过暂时没找到如何设置宽高和位置,应该可以考虑通过 url 后面进行参数设置(通过特定的转换)

javascript
![avatar](https://raw.githubusercontent.com/aehyok/2021/main/image/test.png)

avatar

1 月 4 日

  • 1 vue 中将 v-for 循环组件(通过 v-if 进行展示),方案修改为 component 组件,简化代码
javascript
      <div v-for="(item, index) in columnList" :key="index">
            <component
              :is="item.type + 'View'"
              :column="item"
              :data.sync="formData[item.name]"
            />
            /*
            <!--文本框Input-->
            <!-- <TextView
              :column="item"
              :data.sync="formData[item.name]"
              v-if="item.type.toLowerCase() === 'text'"
            /> -->
            <!--文本框Input-->
            <!-- <TextAreaView
              :column="item"
              :data.sync="formData[item.name]"
              v-if="item.type.toLowerCase() === 'textarea'"
            /> -->
            <!--数值框Number-->
            <!-- <NumberView
              :column="item"
              :data.sync="formData[item.name]"
              v-if="item.type.toLowerCase() === 'number'"
            /> -->
            */

Released under the MIT License.