yukaka
Version:
108 lines (95 loc) • 3.35 kB
HTML
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轱辘</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--button-height: 32px;
--font-size: 14px;
--button-bg: white;
--button-active-bg: #eee;
--border-radius: 4px;
--color: #333;
--border-color: #999;
--border-color-hover: #666;
}
#app {
margin: 20px;
}
body {
font-size: var(--font-size);
}
</style>
<style>
.box{
margin:30px;
}
.col{
height:100px;
border:1px solid red;
}
.toast{
border:1px solid #666;
background:white;
padding:5px;
border-radius:3px;
cursor:pointer;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<!--参数 :loading icon icon-position-->
<g-button :loading="loading1" @click="loading1=!loading1">按钮</g-button>
<g-button icon="shezhi1" icon-position="left" :loading="loading2" @click="loading2=!loading2">按钮</g-button>
<g-button icon="shezhi1" icon-position="right" :loading="loading3" @click="loading3=!loading3">按钮</g-button>
<g-button-group>
<g-button icon="left">上一页</g-button>
<g-button>1</g-button>
<g-button>2</g-button>
<g-button>3</g-button>
<g-button>…</g-button>
<g-button icon="right" icon-position="right">下一页</g-button>
</g-button-group>
</div>
<div class="box">
<!--g-input接收参数 value disabled readonly error 各类事件：@change @input @focus @blur-->
<g-input value="123" disabled></g-input>
<g-input value="123" readonly></g-input>
<g-input value="123"></g-input>
<g-input value="123" @change="InputChange" @input="bindContent"></g-input>
{{msg}}
</div>
<div class="box">
<g-input value="123" error="姓名不能少于两个字"></g-input>
</div>
<div class="box">
<!--g-row接收参数 gutter align-->
<!--g-col接收参数 span offset :ipad :narrow-pc :pc :wide-pc-->
<g-row gutter="0">
<g-col class="col" span="8" ></g-col>
<g-col class="col" span="2" offset="1"></g-col>
<g-col class="col" span="2" offset="1"></g-col>
<g-col class="col" span="9" offset="1" ></g-col>
</g-row>
</div>
<div class="box">
<button class="toast" @click="showToast1">Toast-top</button>
<button class="toast" @click="showToast2">Toast-middle</button>
<button class="toast" @click="showToast3">Toast-bottom</button>
</div>
</div>
<script src="//at.alicdn.com/t/font_860042_b2l86rcb93w.js"></script>
<script src="./src/app.js"></script>
</body>
</html>