85 lines
1.4 KiB
Vue
85 lines
1.4 KiB
Vue
<template>
|
|
<view class="content">
|
|
<image class="logo" src="@/static/logo.png"></image>
|
|
{{ 'initialValue' + initialValue }}
|
|
{{ 'newValue' + newValue }}
|
|
{{ 'oldUnit' + oldUnit }}
|
|
{{ 'newUnit' + newUnit }}
|
|
{{ 'oldOrder' + oldOrder }}
|
|
{{ 'newOrder' + newOrder }}
|
|
|
|
<view class="text-area">
|
|
<yjly-inputunit
|
|
v-model="mylength"
|
|
:unit-type="'length'"
|
|
:unit-order.sync="myunitname"
|
|
:show-english-only="false"
|
|
:decimal-places="5"
|
|
:width="200"
|
|
:style="{ width: 200 + 'px' }"
|
|
@conversion="onchange"
|
|
></yjly-inputunit>
|
|
|
|
<text class="title">Hello RuoYi</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
onLoad: function () {},
|
|
data() {
|
|
return {
|
|
mylength: 10,
|
|
myunitname: 1,
|
|
|
|
initialValue: 0,
|
|
newValue: 0,
|
|
oldUnit: '',
|
|
newUnit: '',
|
|
oldOrder: 0,
|
|
newOrder: 0
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
onchange(e) {
|
|
this.initialValue = e.initialValue;
|
|
this.newValue = e.newValue;
|
|
this.oldUnit = e.oldUnit;
|
|
this.newUnit = e.newUnit;
|
|
this.oldOrder = e.oldOrder;
|
|
this.newOrder = e.newOrder;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logo {
|
|
height: 200rpx;
|
|
width: 200rpx;
|
|
margin-top: 200rpx;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 50rpx;
|
|
}
|
|
|
|
.text-area {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.title {
|
|
font-size: 36rpx;
|
|
color: #8f8f94;
|
|
}
|
|
</style>
|