Use i-drawer and i-icon in iview-weapp in mpvue

One,

The content of the hidden area of ​​the i-drawer in the source code is located in the middle. It is found that no matter how the style is modified, the position of the content cannot be changed. We want the content to appear at the top, so we need to modify the file with the suffix wxss in the drawer source code in iview. , The source code is modified as follows:

.i-drawer-left .i-drawer-container {
	left: 0;
	top: 12%;
	/* top: 50%; */
	transform: translate3d(-100%, -50%, 0)
}

The style of the source code has the highest priority and can only be changed. If you need to introduce components later, the top value is also the same. The following is the complete process of component call:

<view>
    <view class="top" style="width: 100%;">
	    <view style="display: flex;vertical-align: middle;">
	        <img src="../../../static/images/lefttwo.png" style="width: 30px;height: 30px;" @click="toggleLeft1" v-show="!showLeft1" />			
        </view>				
    </view>
    <view>
        <i-drawer :mask-closable="true" :visible="showLeft1" @close="toggleLeft1">
            关注前端尔嵘，我还会卖百货额，淘宝请搜索：华诚荣邦百货,放心肯定会给你优惠多多的
        </i-drawer>
    </view>
</view>

<script>

    export default {
        data() {
			return {
                showLeft1: false, //抽屉默认关闭
            }
        },
        methods: {
            toggleLeft1() {
				this.showLeft1 = !this.showLeft1;
			},
        }
    
    }
</script>

i-icon has a font size by default, and the default font size is 14px. If you need to modify i-icon, you can modify the js file of the corresponding source code.

Component({
    externalClasses: ['i-class'],

    properties: {
        type: {
            type: String,
            value: ''
        },
        custom: {
            type: String,
            value: ''
        },
        size: {
            type: Number,
            value: "30" //默认是14，修改后
        },
        color: {
            type: String,
            value: ''
        }
    }
});