Skip to content

wxwzl/vue-awesome-directives

Repository files navigation

vue-awesome-directives

vue 指令

安装

pnpm add vue-awesome-directives -S

npm i vue-awesome-directives -S

使用

全局引入

import Vue from "vue";
import directive from "vue-awesome-directives";
Vue.use(directive);

按需引入

 pnpm add babel-plugin-component -D  
 或
 npm i babel-plugin-component -D
 或
 pnpm add babel-plugin-import -D 
 或
 npm i babel-plugin-import -D
  • 2、将 .babelrc或babel.config.js 修改为:
// babel-plugin-component
module.exports = {
  //...
  plugins: [
    [
      "component",
      {
        libraryName: "vue-awesome-directives",
        style: false,
      },
    ],
  ],
};
//或者babel-plugin-import

module.exports = {
  //...
  plugins: [
    [
      "import",
      {
        libraryName: "vue-awesome-directives",
        style: false,
      },
    ],
  ],
};
  • 3、使用
// 局部注册
import { Sticky } from "vue-awesome-directives";
import {
  Vue,
  Component,
  Prop,
  ModelSync,
  InjectReactive,
} from "vue-property-decorator";
@Component({
  name: schema.componentType,
  directives: {
    Sticky:Sticky.directive,
  },
})
export default class Button extends Vue {

}

//或者 全局注册

import { Sticky } from "vue-awesome-directives";
Vue.use(Sticky);

指令列表

使用示例:

<van-button
    v-sticky="{ top: '3rem', zIndex: 1, left: 0, root: '#page' , disabled: isSticky,}"
    :type="actualConfig.type"
    :style="style"
    :disabled="actualConfig.disabled"
    :round="round"
    :square="square"
    :size="actualConfig.size"
    :native-type="nativeType"
    @click="onClick"
  >
    {{ actualConfig.btnText }}
  </van-button>
  

  //其中root:可以是css选择器或一个dom对象,如果不填,默认为选取最近的一个滚动父节点