# 全局安装iconfont转换工具
npm install -g iconfont-tools

# 进入iconfont解压根目录
cd iconfont
# 执行
iconfont-tools

只使用 iconfont-weapp-icon.css 文件
需要多色字体混合的, 按需把单色字体class改为原Unicode即可

mounted() {
    const { brandTheme, brandLightTheme, mode } = config;
    let theme = mode;
    if (mode === 'auto') {
      const media = window.matchMedia('(prefers-color-scheme:dark)');
      if (media.matches) {
        theme = 'dark';
      } else {
        theme = 'light';
      }
      media.addEventListener('change', e => {
        // 深色模式
        if (e.matches) {
          // 设置主题
          this.$store.dispatch('setting/changeTheme', { ...config, mode: 'dark', brandTheme });
        } else {
          // 设置主题
          this.$store.dispatch('setting/changeTheme', { ...config, mode: 'light', brandTheme: brandLightTheme });
        }
      });
    }
    if (theme === 'light')
      config.brandTheme = brandLightTheme;
    // 设置主题
    this.$store.dispatch('setting/changeTheme', { ...config });
}

在父组件控制子组件显示, 子组件顶层为Popup弹出层, 父组件直接控制子组件Popup的v-model属性
Popup关闭时, 不会主动触发父组件的data属性值
此时需要子组件显式改变父组件data属性值

# 父组件
data: function(){
  return {
    showPreview: false
  }
}
<ImagePreview
  :showPreview.sync="showPreview"
/>
# 子组件
<template>
  <Popup 
     v-model="showPreview"
     @close="$emit('update:showPreview', false)"
  />
</template>
props: {
  showPreview: {
    type: Boolean,
    default: false
  }
}

https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修饰符

页面定义一个绝对定位元素

<div id="abs"></div>

  #abs {
    position: absolute;
    height: 0;
    width: 0;
  }

页面路由添加一个锚点选参

{
    path: "/index/:anchor?",
    name: "Index",
    meta: {
      title: "XXX",
      keepAlive: false,
    },
    component: () => import("@views/Index.vue")
}

// 页面加载后, 计算位置并跳到相应的位置

mounted: function() {
    this.$nextTick(() => {
      if (this.$route.params.anchor) {
        setTimeout(() => {
          var anchor = document.querySelector("#abs");
          anchor.style.top =
            document.querySelector("#" + this.$route.params.anchor).offsetTop -
            document.querySelector("#header").offsetHeight -
            30 +// 如果有固定头部, 酌情添加高度
            "px";
          anchor.scrollIntoView();
        }, 500);
      }
    });
  }

如果data中的数据对象没有此属性, 首次设置不会触发响应式更新
此时需要显式赋值

data: function(){
  return {
    list: {
      {name: 'xx'},
      {name: 'xx'}
    }
  }
}
....
this.list[index].show = true; // × 无效
this.$set(this.list[index], "show", true); // ✔️ 成功

Vue3 需要手动更新, 在组件上设置动态key即可

<nut-picker mode="selector" :key="'color'+new Date().getTime()"
       v-bind:list-data="color_options"
       @confirm="confirmColor"
>
   <nut-cell title="颜色" :desc="color" is-link class="field"></nut-cell>
</nut-picker>