# dn-vue

**Repository Path**: hong-bin/dn-vue

## Basic Information

- **Project Name**: dn-vue
- **Description**: vue业务模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-13
- **Last Updated**: 2021-05-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### 懂牛科技 vue 项目模版 + sdk （适用懂牛软件页面开发）

##### 配置 webpack 打包方式，使其符合 cms 系统管理方式。

##### 大图片必须通过 调用全局组件 Images 来展示。 并通过 src 参数传入图片的相对路径；

#### 安装依赖

> <code> npm install </code>

#### 启动项目

> <code> npm run dev </code>

### 注意事项：

1. 如果小于 100000 byte 的图片，会自动打包成 base64。 使用原生的 img 标签引入图片即可。大于 97kb 的图片需要引入 全局组件 Images 进行显示。
2. 用户信息通过 SDK init 方法进行初始化。并且将信息记录在 window 全局对象下的 uerAuthorizeInfo 字段。该字段为 只读 属性。

# 自定义指令
## 1.监听元素的点击事件，然后滚动到指定位置。
##### 安装: npm install --save vue-scrollto

>```html
><span v-scroll-to="{
>   el: '#element',          // 滚动的目标位置元素
>   container: '#container', // 可滚动的容器元素
>   duration: 500,           // 滚动动效持续时长（毫秒）
>   easing: 'linear'         // 动画曲线
>   }"
>>
>```
>
>

## 2.图片懒加载，非常方便。
##### 安装: npm install --save vue-lazyload
> ```html
> <img v-lazy="https://www.domain.com/image.jpg">
> ```
>
> 

## 3.给元素添加响应式的tooltip，并可控制显示位置、触发方式和监听事件。
##### 安装: npm install --save v-tooltip
> ```html
> <button v-tooltip="'You have ' + count + ' new messages.'">
> ```
>
> 

## 4.无限滚动指令，当滚动到页面底部时会触发绑定的方法。
##### 安装: npm install --save vue-infinite-scroll
> ```html
>  <div v-infinite-scroll="onLoadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"></div>
> ```
>
>
  

## 5.截断元素里的文本，并在末尾加上省略号。
##### 安装: npm install --save @clampy-js/vue-clampy
> ```html
> <p v-clampy="3">Long text to clamp here</p>
> ```

 
## 5.vue-cookies