使用vue.js实现的容积单位转换器

Liquid Measurement Table in VueJS

vue, table

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1884
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const app = new Vue({
	el: "#app",
	data: () => ({
		//Ounces are the only true data value here; every other value is a dependent computed property that multiplies or divides ounces
		oz: 32
	}),

methods: {
		//Does some nice formatting on the number, if it's a decimal, to make it a little more readable and limit it to 10 total characters
		format(num) {
			num = Number(num);
			return parseInt(num) === num ? num : num.toString().substring(0, 10);
		}
	},

computed: {
		tsp: {
			get() {
				return this.format(this.oz * 6);
			},
			set(val) {
				this.oz = val / 6;
			}
		},
		ml: {
			get() {
				return parseInt(this.format(this.oz * 29.57352968750042));
			},
			set(val) {
				this.oz = val / 29.57352968750042;
			}
		},
		tbsp: {
			get() {
				return this.format(this.oz * 2);
			},
			set(val) {
				this.oz = val / 2;
			}
		},
		ounce: {
			get() {
				return this.format(this.oz);
			},
			set(val) {
				this.oz = val;
			}
		},
		cup: {
			get() {
				return this.format(this.oz / 8);
			},
			set(val) {
				this.oz = val * 8;
			}
		},
		pint: {
			get() {
				return this.format(this.oz / 16);
			},
			set(val) {
				this.oz = val * 16;
			}
		},
		quart: {
			get() {
				return this.format(this.oz / 32);
			},
			set(val) {
				this.oz = val * 32;
			}
		},
		liter: {
			get() {
				return Number(this.format(this.oz * 0.02957352968750042)).toFixed(2);
			},
			set(val) {
				this.oz = val / 0.02957352968750042;
			}
		},
		gallon: {
			get() {
				return this.format(this.oz / 128);
			},
			set(val) {
				this.oz = val * 128;
			}
		}
	}
});

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Barlow+Condensed:300&display=swap");
@import url("https://fonts.googleapis.com/css?family=Martel&display=swap");
// Wanted to use a font with oldstyle figures for numbers. Most Google fonts don't have that option, but Martel has it built-in as its default.

$orange: #ff6a13;
$yellow: #ffd100;
$lightGray: #a7a8aa;
$darkGray: #53565a;
$lightBlue: #7ba7bc;

*,
*:before,
*:after {
	box-sizing: border-box;
	font-family: inherit;
	color: inherit;
	max-width: 100%;
}

*:focus {
	outline: none;
	background-color: $yellow;
}

*::selection {
	background: $yellow;
}

html {
	font-size: 1.125em;
}

body {
	margin: 0;
	font-family: "Barlow Condensed";
	background: #eee;
	color: $darkGray;
	min-height: 100vh;
	display: grid;
	place-content: center;
}

#app {
	display: grid;
	margin: auto;
	max-width: 24rem;
	grid-template-columns: 0.8rem minmax(12rem, 20rem);
	grid-gap: 1rem;
	padding: 1rem;

@media (min-width: 800px) {
		transform: skewX(29deg);

span,
		.card {
			transform: skewX(-29deg);
		}
	}

span {
		text-align: center;
		font-size: 1.25rem;
		display: flex;
		align-items: center;
		color: $lightGray;
		margin-bottom: 0.3em;
		left: 0;
	}

.card {
		display: grid;
		border-radius: 0.25rem;
		align-items: center;

h2 {
			font-size: 2rem;
			font-weight: bold;
			text-align: center;
			margin: 0 0 1em;
		}

.flex-group {
			display: grid;
			align-items: baseline;
			justify-content: space-between;
			grid-template-columns: 1fr max-content;
			grid-template-rows: 1fr;
			border-bottom: 1px solid;

label {
				text-align: right;
				font-size: 1.25rem;
				position: relative;
			}

input {
				font-family: "Martel";
				border: none;
				text-align: left;
				display: inline-block;
				font-size: 1.25rem;
				background: transparent;
				width: 60vw;

@media (min-width: 440px) {
					width: auto;
				}

&:focus + label {
					color: $yellow;
				}
			}
		}
	}
}

HTML

<div class="card">
    <div class="flex-group">
        <input v-model="pint" type="number" id="pint">
        <label for="pint">
            pint{{ pint != 1 ? 's' : '' }}

</label>
    </div>
</div>

<div class="card">
    <div class="flex-group">
        <input v-model="quart" type="number" id="quart">
        <label for="quart">
            quart{{ quart != 1 ? 's' : '' }}
        </label>
    </div>
</div>

<div class="card">
    <div class="flex-group">
        <input v-model="liter" type="number" id="liter">
        <label for="liter">
            liter{{ liter != 1 ? 's' : '' }}
        </label>
    </div>
</div>

<div class="card">
    <div class="flex-group">
        <input v-model="gallon" type="number" id="gallon">
        <label for="gallon">
            gallon{{ gallon != 1 ? 's' : '' }}
        </label>
    </div>
</div>

Liquid Measurement Table in VueJS

vue, table

编辑器支持Emmet

快捷键

Liquid Measurement Table in VueJS

vue, table

使用CKEditor v4和Vue.js v2实现的富文本编辑器实例代码

使用Vue.js实现的增删改查内容管理界面

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：