Mac环境安装

2021年4月08日 4 汉字 1647 围观 1 评论安装

安装HomeBrew

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

安装node

https://qizhanming.com/blog/2020/07/29/how-to-install-node-using-nvm-on-macos-with-brew

prop双向绑定

2020年10月10日 75 汉字 1702 围观 1 评论 Vue

在父组件控制子组件显示, 子组件顶层为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-修饰符

Vue页面锚点

2020年9月27日 54 汉字 1928 围观 1 评论 Vue

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

<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);
      }
    });
  }

更新对象数据触发页面响应

2020年9月14日 56 汉字 1878 围观 1 评论 Vue

如果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>

MySQL替换字段部分内容

2020年7月26日 0 汉字 1474 围观 1 评论 MySQL

UPDATE user SET avatar = REPLACE( avatar, 'http://', 'https://' ) WHERE avatar LIKE 'http://%';