分类
vue

vue 数据更新页面不更新

使用Object.assign

Object.assign(this.somedetail, detail);

应该使用

this.somedetail = Object.assign({}, this.somedetail,detail);

使用Vue.set

this.$set(this.somedetail,detail);

Vue.set(this.somedetail,detail);

如果是数组不更新

使用数组自定义方法push,pop,shift,unshift,splice

分类
vue

vue组件shadow dom化

当我的npm组件rsa-verify在uni-app样式不起作用,在调查原因后发现uni-app将我的input转为uni-input,因此为input所写的样式失效了。于是需要shandow dom来隔离npm 插件和原生内容。

代码

<template>
  <div class="shadow-dom">
    // 插件内容
    </div>
  </div>
</template>
 shadowDomInit() {
      // 创建shadow dom
      const parentElement = document.querySelector('.shadow-dom');
      const fragment = document.createDocumentFragment();
      fragment.appendChild(parentElement.children[0]);
      const shadowRoot = parentElement.attachShadow({ mode: 'open' });
      shadowRoot.appendChild(fragment);
      const sheet = new CSSStyleSheet();
      // 拷贝样式
      document.styleSheets.forEach(stylesheet => {
        stylesheet.cssRules.forEach(rule => {
          if (rule.selectorText) {
            sheet.insertRule(rule.cssText)
          }
        })
      });
      shadowRoot.adoptedStyleSheets = [sheet];
    },
mounted() {
  this.shadowDomInit();
}

第二种初始化方式

    shadowDomInit() {
                // 创建shadow dom
                const parentElement = document.querySelector('.shadow-protocol-frame');
                const fragment = document.createDocumentFragment();
                fragment.appendChild(parentElement.children[0]);
                const shadowRoot = parentElement.attachShadow({mode: 'open'});
                shadowRoot.appendChild(fragment);
                const style = document.createElement('style');
                style.textContent = `.frame-wrap{flex:1;border:none;overflow:hidden;position:absolute;left:0;top:0;width:110%;height:130%;}#outerContainer{overflow:hidden;}.hide-scroll{position:relative;display:flex;overflow:hidden;flex:1;}.hide-scroll::after{content:'';display:block;}.sign-modal{opacity:0;visibility:hidden;transition:opacity .3s;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;display:flex;flex-flow:column nowrap;max-height:500px;height:80%;max-width:300px;padding:20px;width:90%;background:white;border-radius:10px;box-shadow:rgba(0,0,0,0.1) 0 2px 15px;}.sign-modal.active{opacity:1;visibility:visible;}.sign-modal-title{text-align:center;}.sign-footer{height:76px;border-top:1px solid #F4F5F6;display:flex;padding:0 5px;justify-content:space-evenly;align-items:center;margin-top:10px;}.reject-button{border-radius:6px;background:rgba(217,220,220,0.30);font-size:16px;color:rgba(0,0,0,0.65);display:flex;justify-content:center;align-items:center;width:115px;height:40px;cursor:pointer;}.agree-button{border-radius:6px;background:#4277BD;font-size:16px;color:white;display:flex;justify-content:center;align-items:center;width:115px;height:40px;cursor:pointer;}`;
                shadowRoot.appendChild(style);
                shadowRoot.adoptedStyleSheets = [style];
            },

注意要点

  • attachShadow的主体不能为template的母元素,因为这会使母元素的非shandow dom子元素无效化。
  • 插件经过shandow dom化后,内部的document.querySelector和document.getElementByid需要转换成document.querySelector(‘.shadowRoot’).shadowRoot.querySelector。因为经过shandow dom化以后,javascript只能使用特殊方法访问节点。
分类
vue

vue 函数式组件

使用函数式编程可以提高渲染效率,因为它没有状态,没有实例,并且它是一个组件可复用。下面用例展示了如何使用函数式组件。

给函数式组件传递事件

// 子组件
<template functional>
    <div v-example v-on="listeners">{{props.msg}}</div>
</template>
// 父组件 
<list @click="handleClick" :msg="msg"></list>
 handleClick() {
      // eslint-disable-next-line no-debugger
      debugger;
      this.msg = 'aaa';
    }

函数式组件可以自己定义类,也可接收外部传入的类。样式同理。

<template functional>
    <div class="x" :class="[data.class, data.staticClass]" v-example v-on="listeners" :style="data.staticStyle">{{props.msg}}</div>
</template>

在函数式组件中加入别的组件,且别的组件可以不是函数式组件。

<template functional>
    <div class="x" :class="[data.class, data.staticClass]" v-example>
        {{props.msg}}
        <component :is="injections.components.Pane"/>
        <button  v-on="listeners">action</button>
    </div>
</template>

<script>
    import Pane from './Pane';
    export default {
        inject: {
            components: {
                default: {
                    Pane,
                }
            }
        }
    }
</script>

在函数式组件中更改数据源内容

<template functional>
    <div>
        {{$options.setContent(props.msg)}}
    </div>
</template>

<script>
    export default {
        setContent(val) {
            return val + 'sldkflkjdf';
        }
    }
</script>

插槽在函数式组件中能正常使用