12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- <template>
- <view
- :class="utils.bem('sidebar-item', { selected, disabled }) + ' ' + (selected ? 'active-class' : '') + ' ' + (disabled ? 'disabled-class' : '') + ' custom-class'"
- hover-class="van-sidebar-item--hover"
- hover-stay-time="70"
- @tap="onClick"
- >
- <view class="van-sidebar-item__text">
- <van-info v-if="info !== null || dot" :dot="dot" :info="info" custom-style="right: 4px" />
- <view v-if="title">{{ title }}</view>
- <slot v-else name="title" />
- </view>
- </view>
- </template>
- <script module="utils" lang="wxs" src="@/miniprogram_npm/@vant/weapp/wxs/utils.wxs"></script>
- <script>
- 'use strict';
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
- var component_1 = require('../common/component');
- component_1.VantComponent({
- classes: ['active-class', 'disabled-class'],
- relation: {
- type: 'ancestor',
- name: 'sidebar',
- current: 'sidebar-item'
- },
- props: {
- dot: Boolean,
- info: null,
- title: String,
- disabled: Boolean
- },
- methods: {
- onClick: function () {
- var that = this;
- var parent = this.parent;
- if (!parent || this.disabled) {
- return;
- }
- var index = parent.children.indexOf(this);
- parent.setActive(index).then(function () {
- that.$emit('click', index);
- parent.$emit('change', index);
- });
- },
- setActive: function (selected) {
- return this.setData({
- selected: selected
- });
- }
- }
- });
- </script>
- <style>
- @import './index.css';
- </style>
|