@youngbeen/angle-vue-component v0.3.2

@youngbeen/angle-vue-component

功能列表

• ToastMsg消息
• ToastMsgWhite白色消息
• ConfirmPop弹框
• LongTextConfirm长文本确认弹框
• ListScroll滚动底部侦听
• RichSelect选择
• DockSelect选择
• DockSelectWhite白色选择
• DatePicker日期选择
• DatePickerFilm日期滑动选择
• TimePickerFilm时间滑动选择
• Loading加载效果
• IframePop全屏iframe页面弹框
• BeautifyAlert内容美化打印（信息可折叠）

ToastMsg消息

• 限vue2.0+
• 依赖公共src/EventBus

引用

// in html
<toast-msg :noRem75="<boolean>"></toast-msg>

// in script
import eventBus from '@/EventBus'
import ToastMsg from '@youngbeen/angle-vue-component/ToastMsg.vue'
...
components: {
  ToastMsg
}

组件参数解析:

• noRem75 - 是否不采用rem 75px配置，可选，布尔型，默认false采用rem 75px配置

调起示例：

// 显示toast消息
eventBus.$emit('notifyShowToast', {
  msg: '' // 消息内容，必选，字符串类型
})

// 隐藏toast消息
// NOTE 注意该方法只隐藏取消当前显示的消息，消息栈中的后续待显示消息仍会继续显示
eventBus.$emit('notifyHideToast')

ToastMsgWhite白色消息

• 限vue2.0+
• 限rem 75px设定
• 依赖公共src/EventBus

引用

// in html
<toast-msg></toast-msg>

// in script
import eventBus from '@/EventBus'
import ToastMsg from '@youngbeen/angle-vue-component/ToastMsgWhite.vue'
...
components: {
  ToastMsg
}

调起示例：

// 显示toast消息
eventBus.$emit('notifyShowToast', {
  msg: '' // 消息内容，必选，字符串类型
})

// 隐藏toast消息
// NOTE 注意该方法只隐藏取消当前显示的消息，消息栈中的后续待显示消息仍会继续显示
eventBus.$emit('notifyHideToast')

ConfirmPop弹框

• 限vue2.0+
• 限rem 75px设定
• 依赖公共src/EventBus

引用

// in html
<confirm-pop :callback="<function>"></confirm-pop>

// in script
import eventBus from '@/EventBus'
import ConfirmPop from '@youngbeen/angle-vue-component/ConfirmPop.vue'
...
components: {
  ConfirmPop
}

组件参数解析:

• callback - 弹框确认或者取消之后回调，可选，function类型

调起示例

eventBus.$emit('notifyShowConfirmToast', params)

params参数解析

{
  type: 'message', // 展示类型，可选，'message' - 展示消息，'input' - 获取输入信息，默认'message'展示消息
  msg: '', // 消息主体内容，当是message类型时必选
  title: '', // 抬头内容，可选，默认无内容，不展示
  hasCancel: false, // 是否有取消按钮，可选，默认false无取消按钮
  okText: '确定', // 确定按钮显示文字内容，可选，默认“确定”
  cancelText: '取消', // 取消按钮显示文字内容，可选，默认“取消”
  defaultInputValue: '', // 默认的input中的值，可选，当是input类型时有效
  inputPlaceholder: '', // input的placeholder，可选，当是input类型时有效
  tag: <any> // 附带的标记内容，可选，可以是任何内容，该内容会原样附带在回调数据中
}

回调数据解析

{
  type: 'ok', // 操作类型，'ok' - 确认操作， 'cancel' - 取消操作
  inputValue: '', // 获取消息输入情况下，用户输入的内容
  tag: <any> // 激活时传入的tag标记内容
}

LongTextConfirm长文本确认弹框

• 限vue2.0+
• 限rem 75px设定
• 外层父节点必须支持内层fixed
• 依赖公共src/EventBus

引用

// in html
<long-text-confirm></long-text-confirm>

// in script
import eventBus from '@/EventBus'
import LongTextConfirm from '@youngbeen/angle-vue-component/LongTextConfirm.vue'
...
components: {
  LongTextConfirm
}

组件参数解析:

• n/a

调用示例

eventBus.$emit('notifyShowLongTextConfirm', params)

params参数解析

{
  msg: '', // 长文本消息内容。必选，可使用html内容
  title: '', // 抬头。可选，默认空
  btnText: '确定', // 按钮显示内容。可选，默认'确定'
  confirm: () => {} // 点击确定按钮的回调函数。可选，默认空
}

回调数据解析

n/a

ListScroll滚动底部侦听

• 限vue2.0+

引用

// in html
<list-scroll :callback="<function>"></list-scroll>

// in script
import ListScroll from '@youngbeen/angle-vue-component/ListScroll.vue'
...
components: {
  ListScroll
}

组件参数解析:

• callback - 滑动到底部之后回调，可选，function类型

RichSelect选择

• 限vue2.0+
• 限rem 75px设定
• 外层父节点必须支持内层fixed
• 依赖公共src/EventBus

引用

// in html
<rich-select
  :event-name="<event name>"
  :callback="<function>"></rich-select>

// in script
import eventBus from '@/EventBus'
import RichSelect from '@youngbeen/angle-vue-component/RichSelect.vue'
...
components: {
  RichSelect
}

组件参数解析:

• event-name - 自定义的事件名，必选，字符串类型
• callback - 选择选项之后回调，必选，function类型

调起示例

eventBus.$emit('自定义事件名', params)

params参数解析

{
  options: [
    {
      optionText: '' // 选项展示内容，必须
    }
  ], // 必须，选项数据
  activeIndex: -1, // 选中项索引，可选，默认-1不选中任何项
  title: '请选择', // 选项框抬头内容，可选，默认“请选择”
  enableFilter: false, // 是否开启筛选栏功能，可选，默认false不开启
  filterPlaceholder: '请输入筛选条件', // 筛选栏输入框空置提示信息，可选，默认“请输入筛选条件”
  filterBy: ['optionText'], // 筛选字段，可选，默认optionText，即显示内容
}

回调数据解析

{
  index: 1, // 所选选项的index
  item: {...} // 所选选项item内容（内容同传入的params.options中item结构一致）
}

DockSelect选择

• 限vue2.0+
• 限rem 75px设定
• 外层父节点必须支持内层fixed
• 依赖公共src/EventBus

引用

// in html
<dock-select :callback="<function>"></dock-select>

// in script
import eventBus from '@/EventBus'
import DockSelect from '@youngbeen/angle-vue-component/DockSelect.vue'
...
components: {
  DockSelect
}

组件参数解析:

• callback - 选择选项之后回调，必选，function类型

调起示例

eventBus.$emit('notifyShowDockSelect', params)

params参数解析

{
  options: [
    {
      text: '', // 选项展示内容，必须
      optionImg: '', // 选项前图标url，当showIcon是true时，该项必选
      isDisabled: false // 显示的选项不可以被选择，可选，默认false都可以被选择
    }
  ], // 必须，选项数据
  defaultIndex: -1, // 默认选中项索引，可选，默认-1不选中任何项
  title: '请选择', // 选项框抬头内容，可选，默认“请选择”
  showIcon: false, // 是否展示选项图标，可选，默认false不显示
  tip: '' // 提示内容，可选，默认无内容，不显示
}

回调数据解析

{
  index: 1, // 所选选项的index, -1代表不做任何选择
  item: {...} // 所选选项item内容（内容同传入的params.options中item结构一致）
}

DockSelectWhite白色选择

• 限vue2.0+
• 限rem 75px设定
• 外层父节点必须支持内层fixed
• 依赖公共src/EventBus

引用

// in html
<dock-select-white :callback="<function>"></dock-select-white>

// in script
import eventBus from '@/EventBus'
import DockSelectWhite from '@youngbeen/angle-vue-component/DockSelectWhite.vue'
...
components: {
  DockSelectWhite
}

组件参数解析:

• callback - 选择选项之后回调，必选，function类型

调起示例

eventBus.$emit('notifyShowSelect', params)

params参数解析

{
  options: [
    {
      text: '' // 选项展示内容，必须
    }
  ], // 必须，选项数据
  tag: <any> // 附带标识，会原样返回
}

回调数据解析

{
  tag: <any>, // 传入的标识
  index: 1, // 所选选项的index, -1代表不做任何选择
  item: {...} // 所选选项item内容（内容同传入的params.options中item结构一致）
}

DatePicker日期选择

• 限vue2.0+
• 限rem 75px设定
• 外层父节点必须支持内层fixed
• 依赖公共src/EventBus

引用

// in html
<date-picker :callback="<function>"></date-picker>

// in script
import eventBus from '@/EventBus'
import DatePicker from '@youngbeen/angle-vue-component/DatePicker.vue'
...
components: {
  DatePicker
}

组件参数解析:

• callback - 选择日期之后回调，必选，function类型

调起示例

eventBus.$emit('notifyShowDatePicker', params)

params参数解析

{
  title: '请选择', // 选项框抬头，可选，默认“请选择”
  minYear: 1980, // 最小年份，可选，默认1980年
  maxYear: 2019,  // 最大年份，可选，默认今年
  defaultYear: 2019, // 选中年份，可选，默认匹配今年
  defaultMonth: 1, // 选中月份，可选，默认匹配当月
  defaultDay: 31, // 选中日，可选，默认匹配当日
  seperator: '-' // 返回的日期年月日之间的分隔符，可选，默认用-分隔，例如2019-02-23
}

回调数据解析

当取消或者不做任何选择时，返回null

{
  year: 2019, // 所选年份（数字）
  month: 1, // 所选月份（数字）
  day: 18, // 所选日（数字）
  dateString: '2019-01-18' // 所选日期字符串（分隔符根据seperator决定）
}

DatePickerFilm日期滑动选择

• 限vue2.0+
• 限rem 75px设定
• 外层父节点必须支持内层fixed
• 依赖公共src/EventBus

引用

// in html
<date-picker :callback="<function>"></date-picker>

// in script
import eventBus from '@/EventBus'
import DatePicker from '@youngbeen/angle-vue-component/DatePickerFilm.vue'
...
components: {
  DatePicker
}

组件参数解析:

• callback - 选择日期之后回调，必选，function类型

调起示例

eventBus.$emit('notifyShowDatePicker', params)

params参数解析

{
  mode: 'ymd', // 可选，模式，默认ymd - 年月日模式，ym - 年月模式
  title: '请选择', // 选项框抬头，可选，默认“请选择”
  minYear: 1980, // 最小年份，可选，默认1980年
  maxYear: 2019,  // 最大年份，可选，默认今年
  defaultYear: 2019, // 选中年份，可选，默认匹配今年
  defaultMonth: 1, // 选中月份，可选，默认匹配当月
  defaultDay: 31, // 选中日，可选，默认匹配当日
  seperator: '-', // 返回的日期年月日之间的分隔符，可选，默认用-分隔，例如2019-02-23
  tag: <any> // 可选，附带的标记，会原样返回
}

回调数据解析

当取消或者不做任何选择时，返回null

{
  year: 2019, // 所选年份（数字）
  month: 1, // 所选月份（数字）
  day: 18, // 所选日（数字）
  dateString: '2019-01-18' // 所选日期字符串（分隔符根据seperator决定）
}

TimePickerFilm时间滑动选择

• 限vue2.0+
• 限rem 75px设定
• 外层父节点必须支持内层fixed
• 依赖公共src/EventBus

引用

// in html
<time-picker :callback="<function>"></time-picker>

// in script
import eventBus from '@/EventBus'
import TimePicker from '@youngbeen/angle-vue-component/TimePickerFilm.vue'
...
components: {
  TimePicker
}

组件参数解析:

• callback - 选择时间之后的回调，function类型，可选

调用示例

eventBus.$emit('notifyShowTimePicker', params)

params参数解析

{
  mode: 'hm', // 可选，模式，默认hm - 时分模式，hms - 时分秒模式
  title: '请选择', // 可选，选项框抬头内容，默认“请选择”
  defaultHour: '00', // 可选，选中小时，默认匹配当前小时
  defaultMinute: '00', // 可选，选中分钟，默认匹配当前分钟
  defaultSecond: '00', // 可选，选中秒，默认匹配当前秒
  seperator: ':', // 可选，返回的时分秒之间的分隔符，默认用:分隔，例如'01:23:03'
  disableClose: false, // 可选，禁用主动取消，强制用户必须选择，默认false可以主动取消
  tag: <any> // 可选，附带的标记，会原样返回
}

回调数据解析

{
  hour: '00',
  minute: '00',
  second: '00' | null,
  timeString: '00:00:00' | '00:00',
  tag: <any>
}

Loading加载效果

• 限vue2.0+
• 限rem 75px设定
• 外层父节点必须支持内层fixed
• 依赖公共src/EventBus

引用

// in html
<loading :eventName="eventName"></loading>

// in script
import eventBus from '@/EventBus'
import Loading from '@youngbeen/angle-vue-component/Loading.vue'
...
components: {
  Loading
}

组件参数解析:

• eventName - 自定义的event名称，字符串类型，可选。默认'notifyLoading'

调用示例

// 展示
eventBus.$emit('notifyLoading', true)

// 隐藏
eventBus.$emit('notifyLoading', false)

// 带参数调用
eventBus.$emit('notifyLoading', true, params)

// 注：如使用自定义eventName，则替换'notifyLoading'即可

params参数解析

{
  noBgColor: false // 是否去掉默认背景色，布尔型。可选，默认false显示背景色
}

回调数据解析

n/a

IframePop全屏iframe页面弹框

• 限vue2.0+
• 限rem 75px设定
• 外层父节点必须支持内层fixed
• 依赖公共src/EventBus

引用

// in html
<iframe-pop></iframe-pop>

// in script
import eventBus from '@/EventBus'
import IframePop from '@youngbeen/angle-vue-component/IframePop.vue'
...
components: {
  IframePop
}

组件参数解析:

• n/a

调起示例

// 展示
eventBus.$emit('notifyShowIframePop', params)

// 如需主动隐藏，使用以下方法
// 注：该组件中自带关闭按钮，一般无需调用该方法
eventBus.$emit('notifyHideIframePop')

params参数解析

{
  link: '', // 待展示的页面url，必选
  close: () => {} // 用户点击关闭按钮时执行的回调函数，可选
}

回调数据解析

n/a

BeautifyAlert内容美化打印（信息可折叠）

• 限vue2.0+
• 限rem 75px设定
• 外层父节点必须支持内层fixed
• 依赖公共src/EventBus

引用

// in html
<beautify-alert :eventName="eventName"></beautify-alert>

// in script
import eventBus from '@/EventBus'
import BeautifyAlert from '@youngbeen/angle-vue-component/BeautifyAlert.vue'
...
components: {
  BeautifyAlert
}

组件参数解析:

• eventName - 自定义的event名称，字符串类型，可选。默认'notifyBeautifyAlert'

调起示例

// 默认event
eventBus.$emit('notifyBeautifyAlert', params)
// 自定义event
eventBus.$emit(<自定义eventName>, params)

params参数解析

{
  msg: '' | 0 | Object | Array, // 必选，显示内容，可以是纯字符串，数字，或者js对象、数组结构（JSON字符串需先转换，否则会以字符串形式展示）
}

回调数据解析

n/a